<template>
	<view class="content">
		<my-header @instruct="handinstruct" :title="parentTitle" :colorbg="colorbg" />
		<scroll-view :scroll-y="true" class="ScrollView"
			:style="{paddingBottom:orderdetaildata.orderStatusStr !== '待发货' ? '100rpx' : '0'}">
			<view class="LogisticsBox">
				<view class="headerBox">
					<view class="topBox">
						<view class="textBox">
							<p class="p1">{{orderdetaildata.orderStatusStr}}</p>
							<p class="p2" v-if="orderdetaildata.orderStatusStr == '待发货'">商家已接单,请耐心等待</p>
							<p class="p2" v-if="orderdetaildata.orderStatusStr == '待收货'">商品运输中，正加紧为您送达</p>
							<!-- <p class="p2">商家已接单,请耐心等待</p> -->
							<p class="p2" v-if="orderdetaildata.orderStatusStr == '已完成'">商品已送达，欢迎下次购买</p>
						</view>
						<image :src="proxy.serverimageUrl + 'myPage/yunshutab.png'" mode=""></image>
					</view>
					<view class="addrBox">
						<image :src="proxy.serverimageUrl + 'orderdetail/addr.png'" mode=""></image>
						<view class="addrtext">
							<p class="textp1">{{orderdetaildata.userAddr}}</p>
							<p class="textp2">{{orderdetaildata.address}}</p>
							<p class="textp2">
								{{orderdetaildata.userName}}&nbsp;&nbsp;&nbsp;{{orderdetaildata.userPhone}}</p>
						</view>
					</view>
				</view>
				<view class="orderdetail">
					<view class="shopitem" v-for="(item,index) in orderdetaildata.orderDetailDtos" :key="index">
						<image v-if="item.commonFileEntities.length == 0" :src="proxy.serverimageUrl + 'home/shopimg.png'" mode=""></image>
						<image v-else :src="item.commonFileEntities[0].url" mode=""></image>
						<view class="shoptextBox">
							<p class="title">{{item.schoolName}}—{{item.cname}}</p>
							<p class="name">{{item.sname}},{{item.specificationsSize}}</p>
							<view class="priceBox">
								<view class="price">
									￥{{item.totalPrice}}
								</view>
								<view class="num">
									x{{item.number}}
								</view>
							</view>
						</view>
					</view>
					<view class="kong-line">

					</view>
					<view class="publicsty" v-if="orderdetaildata.expressAmount">
						<view class="publicsty-left">
							商品运费
						</view>
						<view class="publicsty-right">
							￥{{orderdetaildata.expressAmount}}
						</view>
					</view>
					<view class="publicsty">
						<view class="publicsty-left">
							订单总金额<span class="spantext">共{{orderdetaildata.orderNumber}}件商品</span>
						</view>
						<view class="publicsty-right">
							￥{{orderdetaildata.totalAmount}}
						</view>
					</view>
					<view class="publicsty">
						<view class="publicsty-left">
							支付方式
						</view>
						<view class="publicsty-right publicsty-text">
							在线支付
						</view>
					</view>
				</view>
				<view class="logisticsBox" v-if="orderdetaildata.logisticsNo">
					<p class="title">{{expressCompanydata.expressCompany}}:
						{{expressCompanydata.logisticsNo}}</p>
					<view class="kong-line">

					</view>
					<view class="setps">
						<view class="setps-item" v-for="(item,index) in expressCompanydata.list"
							:key="index">
							<view class="setps-item-left">
								<view :class="[setupnum == index ? 'round' :'rounds']">

								</view>
								<view :class="[setupnum == index ? 'colline' :'collines']">

								</view>
							</view>
							<view class="setps-item-right">
								<p class="addrtitle">{{item.wremark}}</p>
								<p class="addrtime">{{item.wtime}}</p>
							</view>
						</view>
					</view>
				</view>
				<view class="orderdetails">
					<view class="publicsty">
						<view class="publicsty-left">
							订单编号
						</view>
						<view class="publicsty-text">
							{{orderdetaildata.orderNo}}
						</view>
					</view>
					<view class="publicsty">
						<view class="publicsty-left">
							创建时间
						</view>
						<view class="publicsty-text">
							{{orderdetaildata.createTime}}
						</view>
					</view>
					<view class="publicsty">
						<view class="publicsty-left">
							配送方式
						</view>
						<view class="publicsty-text">
							普通快递
						</view>
					</view>
					<view class="publicsty" v-if="orderdetaildata.orderStatusStr !== '待发货'">
						<view class="publicsty-left">
							物流单号
						</view>
						<view class="publicsty-text">
							WL123456789
						</view>
					</view>
					<view class="publicsty" v-if="orderdetaildata.orderStatusStr !== '待发货'">
						<view class="publicsty-left">
							发货时间
						</view>
						<view class="publicsty-text">
							{{orderdetaildata.deliveryTime}}
						</view>
					</view>
					<view class="publicsty" v-if="orderdetaildata.receivingGoodsTime">
						<view class="publicsty-left">
							收货时间
						</view>
						<view class="publicsty-text">
							{{orderdetaildata.receivingGoodsTime}}
						</view>
					</view>
				</view>
			</view>
			<view style="background-color: #f2f2f2;height: 30rpx;width: 100%;">

			</view>
		</scroll-view>
		<view class="bottom-btnBox" v-if="orderdetaildata.orderStatusStr !== '待发货'">
			<view class="box">
				<view></view>
				<view class="btnbox" v-if="orderdetaildata.orderStatusStr == '待收货'">
					<up-button @click="Confirmreceipt" text="确认收货" color="#013CAA"></up-button>
				</view>
				<view class="btnbox" v-if="orderdetaildata.orderStatusStr == '已完成'">
					<up-button @click="salesservice" :plain="true" text="申请售后" color="#013CAA"></up-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		queryLogisticsNo,
		orderDetailByOrderId,
		orderConfirm
	} from '../../utils/api.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const { proxy,ctx } = getCurrentInstance()
	
	const current = ref('')
	onLoad((o) => {
		current.value = o.current
		if (o.orderId) {
			getorderdetail(o.orderId)
		}
	})
	const Confirmreceipt = () => {
		let params = {
			orderId: orderdetaildata.value.orderId,
			status: 3
		}
		orderConfirm(params).then(res => {
			if (res.code == 200) {
				setTimeout(() => {
					uni.showToast({
						title: '确认收货成功',
						duration: 1000,
						icon: 'success'
					})
					setTimeout(() => {
						uni.hideToast();
						uni.navigateBack({
							delta:1
						})
					}, 1000)
				}, 0)
			}
		})
	}
	/*申请售后跳转*/
	const salesservice = () => {
		if (orderdetaildata.value.isRefund) {
			uni.showToast({
				title: '已申请，请等待',
				duration:1000,
				icon:'error'
			})
			return
		} else {
			uni.navigateTo({
				url: '/subpages/AfterSales/index?orderId=' + orderdetaildata.value.orderId + '&current=' + current.value
			})
		}
	
	}
	const expressCompanydata = ref({})
	const orderdetaildata = ref({})
	const getorderdetail = (orderId) => {
		orderDetailByOrderId(orderId).then(res => {
			if (res.code == 200) {
				orderdetaildata.value = res.data
				if (res.data)
					if (res.data.logisticsNo) {
						queryLogisticsNo(res.data.logisticsNo).then(res => {
							expressCompanydata.value = res.data
						})
					}
			}
		})

	}
	/*用于头部组件返回事件*/
	const instruct = ref('back')
	const handinstruct = (instruct) => {
		switch (instruct) {
			// 返回
			case 'back':
				uni.navigateBack({
					delta: 1
				})
				break;
		}
	}
	const parentTitle = ref('订单详情')
	const colorbg = '#F2F2F2'
	const setupnum = ref(0)
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F2F2F2;
		height: 100vh;

		.ScrollView {
			box-sizing: border-box;
			padding: 30rpx 30rpx 0rpx;
			height: calc(100vh - 200rpx);

			.LogisticsBox {
				width: 100%;

				.headerBox {
					padding-top: 36rpx;
					border-radius: 20rpx;
					background: linear-gradient(180deg, #4A87F8, #F2F2F2);
				}

				.topBox {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 36rpx;

					.textBox {

						.p1 {
							font-family: Source Han Sans SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #FFFFFF;
						}

						.p2 {
							margin-top: 10rpx;
							font-family: Source Han Sans SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #D1DCFD;
						}
					}

					image {
						width: 88rpx;
						height: 88rpx;
					}
				}

				.addrBox {
					margin-top: 26rpx;
					width: 100%;
					padding: 36rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					display: flex;
					align-items: center;

					image {
						width: 74rpx;
						height: 74rpx;
					}

					.addrtext {
						margin-left: 30rpx;

						.textp1 {
							font-family: Source Han Sans SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #303030;
							line-height: 28rpx;
						}

						.textp2 {

							margin-top: 18rpx;
							font-family: Source Han Sans SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #636363;
							line-height: 26rpx;
						}
					}
				}

				.orderdetail {
					width: 100%;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 38rpx 30rpx;

					.shopitem {
						display: flex;
						align-items: center;
						margin-bottom: 35rpx;

						image {
							width: 180rpx;
							height: 180rpx;
						}

						.shoptextBox {
							width: 420rpx;
							margin-left: 31rpx;

							.title {
								font-family: Source Han Sans SC;
								font-weight: 500;
								font-size: 30rpx;
								color: #303030;
								line-height: 30rpx;
							}

							.name {
								margin-top: 24rpx;
								font-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #636363;
								line-height: 22rpx;
							}

							.priceBox {
								margin-top: 68rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.price {
									font-family: Source Han Sans SC;
									font-weight: 500;
									font-size: 32rpx;
									color: #013CAA;
									line-height: 32rpx;
								}

								.num {
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #636363;
									line-height: 24rpx;
								}
							}
						}
					}

					/*公共样式（用的较多）*/
					.kong-line {
						width: 100%;
						height: 1rpx;
						background: #EEEEEE;
					}

				}

				.publicsty {
					margin-top: 41rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.publicsty-left {
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #303030;
						line-height: 28rpx;

						.spantext {
							margin-left: 20rpx;
							font-family: Source Han Sans SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #929292;
						}
					}

					.publicsty-right {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #303030;
						line-height: 32rpx;
					}

					.publicsty-text {
						font-family: Source Han Sans SC;
						font-weight: 400 !important;
						font-size: 28rpx !important;
						color: #303030;
						line-height: 28rpx;
					}

				}

				.logisticsBox {
					padding: 35rpx;
					background-color: #FFFFFF;
					border-radius: 20rpx;
					margin-top: 30rpx;

					.title {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #303030;
					}

					.kong-line {
						width: 100%;
						height: 1rpx;
						margin-top: 28rpx;
						background: #DFDFDF;
					}

					.setps {
						margin-top: 50rpx;

						.setps-item {
							display: flex;
							justify-content: space-between;
							box-sizing: border-box;

							.setps-item-left {
								width: 30rpx;
								display: flex;
								flex-direction: column;
								align-items: center;

								.round {
									width: 30rpx;
									height: 30rpx;
									background: #FFFFFF;
									border-radius: 50%;
									border: 8rpx solid #4A87F8;
								}

								.rounds {
									width: 14rpx;
									height: 14rpx;
									background: #DEDEDE;
									border-radius: 50%;
								}

								.colline {
									width: 2rpx;
									height: calc(100% - 30rpx);
									background: #DEDEDE;
								}

								.collines {
									width: 2rpx;
									height: calc(100% - 14rpx);
									background: #DEDEDE;
								}
							}

							.setps-item-right {
								width: 560rpx;
								margin-left: 30rpx;
								min-height: 170rpx;
								max-height: 200rpx;

								.addrtitle {
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #303030;
									line-height: 28rpx;
								}

								.addrtime {
									margin-top: 22rpx;
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 24rpx;
									line-height: 24rpx;
									color: #9B9B9B;
								}
							}
						}

					}

					.setps-item:last-child {
						.setps-item-left {
							.colline {
								display: none;
							}

							.collines {
								display: none;
							}
						}

					}

				}

				.orderdetails {
					width: 100%;
					margin-top: 30rpx;
					border-radius: 20rpx;
					background-color: #FFFFFF;
					padding: 41rpx 30rpx 41rpx;
				}

				.orderdetails {
					.publicsty:first-child {
						margin-top: 0;
					}
				}
			}
		}

		.bottom-btnBox {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 15rpx 30rpx;
			background: #FFFFFF;

			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btnbox {
					width: 240rpx;
					height: 80rpx;
				}
			}

		}
	}
</style>